﻿@model bordspil.Models.GameInstance
@{
    ViewBag.Title = "Connect4 - " + Model.Name;
}

<h2>Connect4</h2>

<div id="table">
    <table id="C4table">
        <tbody>
            <tr class="C4row">
                <td class ="C4class" id="id00" ><div class="C4div"></div></td>  
                <td class ="C4class" id="id10" ><div class="C4div"></div></td>
                <td class ="C4class" id="id20" ><div class="C4div"></div></td>
                <td class ="C4class" id="id30" ><div class="C4div"></div></td>
                <td class ="C4class" id="id40" ><div class="C4div"></div></td>
                <td class ="C4class" id="id50" ><div class="C4div"></div></td>
                <td class ="C4class" id="id60" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="id01" ><div class="C4div"></div></td>  
                <td class ="C4class" id="id11" ><div class="C4div"></div></td>
                <td class ="C4class" id="id21" ><div class="C4div"></div></td>
                <td class ="C4class" id="id31" ><div class="C4div"></div></td>
                <td class ="C4class" id="id41" ><div class="C4div"></div></td>
                <td class ="C4class" id="id51" ><div class="C4div"></div></td>
                <td class ="C4class" id="id61" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="id02" ><div class="C4div"></div></td>  
                <td class ="C4class" id="id12" ><div class="C4div"></div></td>
                <td class ="C4class" id="id22" ><div class="C4div"></div></td>
                <td class ="C4class" id="id32" ><div class="C4div"></div></td>
                <td class ="C4class" id="id42" ><div class="C4div"></div></td>
                <td class ="C4class" id="id52" ><div class="C4div"></div></td>
                <td class ="C4class" id="id62" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="id03" ><div class="C4div"></div></td>  
                <td class ="C4class" id="id13" ><div class="C4div"></div></td>
                <td class ="C4class" id="id23" ><div class="C4div"></div></td>
                <td class ="C4class" id="id33" ><div class="C4div"></div></td>
                <td class ="C4class" id="id43" ><div class="C4div"></div></td>
                <td class ="C4class" id="id53" ><div class="C4div"></div></td>
                <td class ="C4class" id="id63" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="id04" ><div class="C4div"></div></td>  
                <td class ="C4class" id="id14" ><div class="C4div"></div></td>
                <td class ="C4class" id="id24" ><div class="C4div"></div></td>
                <td class ="C4class" id="id34" ><div class="C4div"></div></td>
                <td class ="C4class" id="id44" ><div class="C4div"></div></td>
                <td class ="C4class" id="id54" ><div class="C4div"></div></td>
                <td class ="C4class" id="id64" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="id05" ><div class="C4div"></div></td>  
                <td class ="C4class" id="id15" ><div class="C4div"></div></td>
                <td class ="C4class" id="id25" ><div class="C4div"></div></td>
                <td class ="C4class" id="id35" ><div class="C4div"></div></td>
                <td class ="C4class" id="id45" ><div class="C4div"></div></td>
                <td class ="C4class" id="id55" ><div class="C4div"></div></td>
                <td class ="C4class" id="id65" >65<div class="C4div"></div></td>
            </tr>

        </tbody>
    </table>
</div>
<script>
	$(function () {
		var group = '@(Model.ID)';
		var hub = $.connection.gameHub;

		hub.client.cellClicked = function (cellId) {
			$("#" + cellId).text("O");
		};

		$.connection.hub.start().done(function() {
			hub.server.join(group);

			$("#C4table tr td").click(function () {
				hub.server.clickColumn(group, this.id);
				$(this).text("X");
			});
		});
	});

</script>